<template>
    <div id="dr3">
        <Breadcrumb style="margin-bottom: 10px">
            <BreadcrumbItem to="/superAdmin">首页</BreadcrumbItem>
            <BreadcrumbItem>运营平台分析</BreadcrumbItem>
            <BreadcrumbItem>用户地区分布</BreadcrumbItem>
        </Breadcrumb>
        <Select v-model="type" style="width:200px" @on-change="typeChange">
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        &nbsp;
        <DatePicker v-model="startTime" type="date" placeholder="选择开始时间" style="width: 150px"></DatePicker>
        至
        <DatePicker v-model="endTime" type="date" placeholder="选择结束时间" style="width: 150px"></DatePicker>
        &nbsp;
        <Button type="info" @click="search()">查询</Button>
        <Table :maxWidth="1000" :minWidth="10" stripe :columns="columns" :data="data"
               v-if="data&&data.length>0" style="margin-top: 10px"></Table>

        <div id="loading" v-if="loading">
            <div class="spinner">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>

    </div>
</template>
<script type="text/ecmascript-6">
    import sessionUtils from '../../model/sessionUtils';
    import ipServer from '../../model/ip';
    import Axios from 'axios';
    export default{
        data(){
            return {
                type: "贵州",
                endTime:"",
                startTime:"",
                typeList: [
                    {
                        value: '北京',
                        label: '北京'
                    },
                    {
                        value: '安徽',
                        label: '安徽'
                    },
                    {
                        value: '福建',
                        label: '福建'
                    },
                    {
                        value: '甘肃',
                        label: '甘肃'
                    },
                    {
                        value: '广东',
                        label: '广东'
                    },
                    {
                        value: '广西',
                        label: '广西'
                    },
                    {
                        value: '贵州',
                        label: '贵州'
                    },
                    {
                        value: '海南',
                        label: '海南'
                    },
                    {
                        value: '河北',
                        label: '河北'
                    },
                    {
                        value: '河南',
                        label: '河南'
                    },
                    {
                        value: '黑龙江',
                        label: '黑龙江'
                    },
                    {
                        value: '湖北',
                        label: '湖北'
                    },
                    {
                        value: '湖南',
                        label: '湖南'
                    },
                    {
                        value: '吉林',
                        label: '吉林'
                    },
                    {
                        value: '江苏',
                        label: '江苏'
                    },
                    {
                        value: '江西',
                        label: '江西'
                    },
                    {
                        value: '辽宁',
                        label: '辽宁'
                    },
                    {
                        value: '内蒙古',
                        label: '内蒙古'
                    },
                    {
                        value: '宁夏',
                        label: '宁夏'
                    },
                    {
                        value: '青海',
                        label: '青海'
                    },
                    {
                        value: '山东',
                        label: '山东'
                    },
                    {
                        value: '山西',
                        label: '山西'
                    },
                    {
                        value: '陕西',
                        label: '陕西'
                    },
                    {
                        value: '上海',
                        label: '上海'
                    },
                    {
                        value: '四川',
                        label: '四川'
                    },
                    {
                        value: '天津',
                        label: '天津'
                    },
                    {
                        value: '西藏',
                        label: '西藏'
                    },
                    {
                        value: '新疆',
                        label: '新疆'
                    },
                    {
                        value: '云南',
                        label: '云南'
                    },
                    {
                        value: '浙江',
                        label: '浙江'
                    },
                    {
                        value: '重庆',
                        label: '重庆'
                    },
                    {
                        value: '香港',
                        label: '香港'
                    },
                    {
                        value: '澳门',
                        label: '澳门'
                    },
                    {
                        value: '台湾',
                        label: '台湾'
                    }
                ],
                loading: false,
                columns: [
                    {
                        title: '司机数量',
                        key: 'driverCount'
                    },
                    {
                        title: '配件商',
                        key: 'productsBusinessCount'
                    },
                    {
                        title: '修理',
                        key: 'repairCount'
                    },
                    {
                        title: '流动补胎',
                        key: 'tyreRepairCount'
                    },
                    {
                        title: '审车',
                        key: 'vehicleInspectionCount',
                    },
                    {
                        title: '加油',
                        key: 'putOilCount'
                    },
                    {
                        title: '吊车',
                        key: 'hoistCount'

                    },
                    {
                        title: '合计',
                        key: 'sum'
                    },
                    {
                        title: '商家总数',
                        key: 'businessSum'
                    }
                ],
                data: []
            }
        },
        mounted(){
            this.getData();
        },
        methods: {
            search(){
                this.getData();
            },
            getData(page){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                param.append('blacklistStatus', "2");
                param.append('userType', this.type);
                if (page) {
                    param.append('pageId', page + "");
                }
                if (this.type) {
                    param.append('province', this.type + "");
                }
                if (this.startTime) {
                    param.append('startYearMonthDay', sessionUtils.DateToTime(this.startTime) + "");
                }
                if (this.endTime) {
                    param.append('endYearMonthDay', sessionUtils.DateToTime(this.endTime) + "");
                }
                this.loading = true;
                Axios.post(ipServer + "analysis/selectRegisterUserRegionCount", param)
                        .then(res => {
                            if (res.data.code == 0) {

                                sessionUtils.setSession("token", res.data.token);
                                this.data = res.data.data;

                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            }
        }
    }
</script>


<style scoped>
    @import "../../assets/css/loading.css";

</style>